<template>
    <el-dialog :title="title" :visible.sync="visible" :center="true" @open="open()" @close="close()">
        <el-form ref="form" :model="form" :disabled="isView" label-width="80px" size="mini">
            <el-form-item label="事件">
                <el-input v-model="form.project"></el-input>
            </el-form-item>

            <el-form-item label="姓名">
                <el-input v-model="form.name"></el-input>
            </el-form-item>

            <el-form-item label="时间" size="mini">
                <el-col :span="11">
                    <el-date-picker
                            type="datetime"
                            placeholder="开始时间"
                            v-model="form.startTime"
                            value-format="yyyy-MM-dd"
                            :editable="false"
                            style="width: 100%;"
                    ></el-date-picker>
                </el-col>
                <el-col class="line" :span="2" style="text-align: center">-</el-col>
                <el-col :span="11">
                    <el-date-picker
                            type="datetime"
                            placeholder="截止时间"
                            v-model="form.endTime"
                            value-format="yyyy-MM-dd"
                            :editable="false"
                            style="width: 100%;"
                    ></el-date-picker>
                </el-col>
            </el-form-item>

            <el-form-item label="完成度(%)">
                <el-input v-model="form.precent"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input type="textarea" v-model="form.remark" :rows="5"></el-input>
            </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="close">关 闭</el-button>
            <el-button v-if="!isView" type="primary" size="small" @click="onSubmit()">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: "comDialog",
        props: {
            value: {
                type: Boolean,
                default: false,
                required: true,
            },
            option: Object
        },
        data() {
            return {
                title: '',
                type: '',
                visible: false,
                form: {
                    project: '',
                    name: '',
                    startTime: '',
                    endTime: '',
                    useTime: '1',
                    precent: '',
                    remark: ''
                },
            }
        },
        watch: {
            value (val) {
                this.visible = val
            },
            type (val) {
                switch (val) {
                    case 'add':
                        this.title = '新增'
                        break
                    case 'edit':
                        this.title = '编辑'
                        break
                    case 'view':
                        this.title = '查看'
                        break
                }
            }
        },
        computed: {
            isAdd () {
                return this.type == 'add'
            },
            isView () {
                return this.type == 'view'
            }
        },
        methods: {
            open () {
                this.type = this.option.type
                this.form = this.option.data

                if (!this.isAdd) {
                    this.getData(this.option.data.id)
                }
            },
            close () {
                // 重置组件数据
                Object.assign(this.$data, this.$options.data())
                this.$emit('input', false)
            },
            onSubmit () {
                let fn = this.isAdd ? 'postIndex' : 'putIndex'

                this.$ajax[fn](this.form).then(res => {
                    this.$message({
                        type: 'success',
                        message: `${this.title}成功`,
                    })
                    this.close()
                    // 刷新列表
                    this.$emit('callback')
                })
            },
            getData (id) {
                this.$ajax.getIndex(`/index/${id}`).then( res => {
                    this.form = res.data
                })
            }
        },
        created: function () {
            // 动态创建的首次需要用到
            this.visible = this.value
            this.open()
        }
    }
</script>

<style scoped>

</style>
